*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    font-family: monospace;
}
.page{
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
}
#page1{
    background-color: rgb(6, 80, 6);
    display: block;
    z-index: 3;
}
.up{
    animation: a 5s linear 1;
    animation-fill-mode: forwards;
}
@keyframes a{
    from{
        top: 0;
    }
    to{
        top: -100%;
    }
}

.top{
    background: url(./image/christmas_garland_PNG37.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 100vw;
    height: 30vh;
}
.music{
    position: absolute;
    top: 35vw;
    right: 18vw;
    width: 65vw;
    height: 65vw;
}
.music > img:first-of-type {
    position: absolute;
    top: 20%;
    right: 24.5%;
    width: 27vw;
    height: 27vw;
    /* z-index: -1; */
    animation: disk 1s linear infinite;
}
@keyframes disk{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.music > img:last-of-type{
    top: 30%;
    right: 29%;
    position: absolute;
    width: 7vw;
    height: 7vw;
}
.music-circle{
    background: url(./image/christmas_wreath_PNG89.png) no-repeat;
    position: absolute;
    width: 65vw;
    height: 65vw;
    background-size: 100%;
    z-index: 1;
}
.round {
    height: 100%;
    text-align: center;
    font-size: 10vh;
    color: rgb(154, 3, 3);
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    width: 100vw;
    height: 10vh;
}
#page2{
    /* z-index: -2; */
}
.p2-bg{
    background: url(./image/tree.jpg) no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100%;
    z-index: 1;
    background-position: center;
    filter: blur(5px);
}
.letter{
    background: url(./image/letter.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 70vw;
    height: 70vw;
    top: 12vh;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.open{
    position: absolute;
    top: 13vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 25px;
    color: #da9740;
}
.tree{
    background: url(./image/christmas_tree_PNG44.png) no-repeat;
    background-size: 100%;
    width: 55vw;
    height: 48vh;
    position: absolute;
    top: 90vw;
    left: 5vw;
}
.gift{
    background: url(./image/gift_PNG100127.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 30vw;
    height: 31vw;
    top: 140vw;
    left: 60vw;
}
.gift::before{
    content: '拆开 看看';
    color: #fbfbfbba;
    font-weight: 700;
    font-size: -webkit-xxx-large;
    position: absolute;
    top: -26vw;
    text-align: center;
}
#page3{
    display: none;
    /* z-index: -1; */
    transition: all 0.5s;
}
.p3-bg{
    position: absolute;
    background: url(./image/snow.jpg) no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100%;
    filter: blur(4px);
}
.santa{
    position: absolute;
    background: url(./image/santa_claus2.png) no-repeat;
    background-size: 100%;
    width: 70vw;
    height: 42vw;
    left: -80vw;
    animation: santa 6s linear infinite;
}
@keyframes santa{
    0% {
        transform: translateX(0) translateY(0);
       }
   100% {
    transform: translateX(667px) translateY(0px);
       }
}
.reindeer{
    position: absolute;
    background: url(./image/reindeer_PNG79.png) no-repeat;
    background-size: 100%;
    width: 75vw;
    height: 65vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.happy{
    position: absolute;
    color: #f1f1b4;
    font-size: 15vw;
    width: 65vw;
    height: 35vw;
    left: 0;
    right: 0;
    top: 65vh;
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
}